<!--
 *Author：jxx
 *Date：{Date}
 *Contact：283591387@qq.com
 *业务请在@/extension/co/co/ImportCostScheme.jsx或ImportCostScheme.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
 -->
<template>
    <div>
        <view-grid ref="grid" :columns="columns" :detail="detail" :details="details" :editFormFields="editFormFields"
            :editFormOptions="editFormOptions" :searchFormFields="searchFormFields" :searchFormOptions="searchFormOptions"
            :table="table" :extend="extend" :onInit="onInit" :onInited="onInited" :searchBefore="searchBefore"
            :searchAfter="searchAfter" :addBefore="addBefore" :updateBefore="updateBefore" :rowClick="rowClick"
            :modelOpenBefore="modelOpenBefore" :modelOpenAfter="modelOpenAfter">
            <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
            <template #gridHeader>
            </template>
        </view-grid>
    </div>

    <select-accountSubject ref="accountSubjectRef" @onSelectAccountSubject="onSelectAccountSubject"></select-accountSubject>
    <select-assistItem ref="assistItemRef" @onSelectAssistItem="onSelectAssistItem"></select-assistItem>
    <select-expenseItem ref="expenseItemRef" @onSelectExpenseItem="onSelectExpenseItem"></select-expenseItem>
</template>
<script setup lang="jsx">
import extend from "@/extension/co/co/ImportCostScheme.jsx";
import viewOptions from './ImportCostScheme/options.js'
import SelectAccountSubject from './ImportCostSchemeSelectAccountSubject.vue'
import SelectAssistItem from './ImportCostSchemeSelectAssistItem.vue'
import SelectExpenseItem from './ImportCostSchemeSelectExpenseItem.vue'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
//http请求，proxy.http.post/get
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
const accountSubjectRef = ref()
const assistItemRef = ref()
const expenseItemRef = ref()
//调用的接口地址,这里使用的生成页面的接口，也可以参照：组件示例->table组件中自定义配置
let gridRef;//对应[表.jsx]文件中this.使用方式一样
//生成对象属性初始化
const onInit = async ($vm) => {
    gridRef = $vm;
    //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
    //更多属性见：https://doc.volcore.xyz/docs/view-grid
}
//生成对象属性初始化后,操作明细表配置用到
const onInited = async () => {
    gridRef.detail.columns.find(x => { return x.field == 'DepartmentId' }).multiple = false
    detail.columns.forEach((x) => {
        if (x.field == 'AccountSubjectNo') {
            x.render = (h, { row, column, index }) => {
                x.edit = null;//设置当前字段不可编辑
                return (
                    <div style="display: flex !important;justify-content: space-between !important;">
                        <span style="margin-left:5px">{row.AccountSubjectNo}</span>
                        <el-button link
                            onClick={($e) => {
                                $e.stopPropagation();
                                //触发事件
                                accountSubjectRef.value.open(row)

                            }}
                            class="el-icon-search"
                            style="color: #2196F3;cursor: pointer;"
                        ></el-button>
                    </div>
                );
            };
        }
        if (x.field == 'ExpenseItemRange') {
            x.render = (h, { row, column, index }) => {
                x.edit = null;//设置当前字段不可编辑
                return (
                    <div style=" display: flex !important;justify-content: space-between !important;">
                        <span style="margin-right:5px">{row.ExpenseItemRange}</span>
                        <el-button link
                            onClick={($e) => {
                                $e.stopPropagation();
                                //触发事件
                                assistItemRef.value.open(row)

                            }}
                            class="el-icon-search"
                            style="color: #2196F3;cursor: pointer;"
                        ></el-button>
                    </div>
                );
            };
        }
        if (x.field == 'ExpenseItemName') {
            x.render = (h, { row, column, index }) => {
                x.edit = null;//设置当前字段不可编辑
                return (
                    <div style=" display: flex !important;justify-content: space-between !important;">
                        <span style="margin-right:5px">{row.ExpenseItemName}</span>
                        <el-button link
                            onClick={($e) => {
                                $e.stopPropagation();
                                //触发事件
                                expenseItemRef.value.open(row)

                            }}
                            class="el-icon-search"
                            style="color: #2196F3;cursor: pointer;"
                        ></el-button>
                    </div>
                );
            };
        }
    })
}
const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const rowClick = ({ row, column, event }) => {
    grid.value.clearSelection();
    //点击行默认选中
    grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
}
const onSelectAccountSubject = (row) => {

    //写入明细表
    gridRef.getTable().rowData.push(row)
}
const onSelectAssistItem = (row) => {

    //写入明细表
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>

